<template>
	<view class="local_pop">
		<view class="pop_box" :class="[show?'mask':'nomask']" @click="close">
			<view class="content" :class="[show?'show':'hide']">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"localPop",
		data() {
			return {
				animationData: {}
			};
		},
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			close (e) {
				console.log(e, 'e')
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.local_pop{
		position: relative;
		width: 100%;
		
		@keyframes mask {
			from{
				opacity: 0;
			} to {
				opacity: 1;
			}
		}
		
		@keyframes nomask {
			from{
				opacity: 1;
			} to {
				opacity: 0;
			}
		}
		
		.mask{
			display: block;
			animation-name: mask;
			animation-duration: 0.4s;
			animation-fill-mode: forwards;
		}
		.nomask{
			display: none;
			animation-name: nomask;
			animation-duration: 0.4s;
			animation-fill-mode: forwards;
		}
 		
		.pop_box{
			width: 100%;
			height: 100vh;
			position: absolute;
			top: 0;
			z-index: 999999;
			overflow: hidden;
			background-color: rgba(0, 0, 0, 0.4);
			backdrop-filter: blur(1rpx);//毛玻璃属性
			opacity: 0;
			
			.content{
				width: 100%;
				position: relative;
				transform: translateY(-100%);
			}
			.show{
				animation-name: show;
				animation-duration: 0.4s;
				animation-fill-mode: forwards;
			}
			.hide{
				animation-name: hide;
				animation-duration: 0.4s;
				animation-fill-mode: forwards;
			}
			@keyframes show {
				from{
					transform: translateY(-100%);
				} to {
					transform: translateY(0%);
				}
			}
			@keyframes hide {
				from{
					transform: translateY(0%);
				} to {
					transform: translateY(-100%);
				}
			}
		}
		
		
	}
</style>